In Java, a textbox is called JTextField, a label is called JLabel, and a button is called JButton.En Java, una caja de texto se llama JTextField, una etiqueta se llama JLabel, y un botón se llama JButton.
Graphic User Interface |
| A graphic user interface (GUI) allows the user to interact in a natural and intuitive way with the computer. A GUI is composed of graphics elements called controls and in some cases windows. These elements are designed so that the user knows where to make click with the mouse or where he can type some text with the keyboard. Una interface gráfica del usuario (GUI) permite al usuario interactuar en una forma natural e intuitiva con la computadora. Una GUI está formada por elementos gráficos llamados controles y en algunos casos ventanas. Estos elementos están diseñados para que el usuario sepa donde hacer clic con el ratón o donde escribir texto con el teclado. |
| Tip |
| All GUI controls are variables. The main difference between a regular variable and a GUI variable is that a regular variable cannot be seen by the user, while a GUI variable can be seen from both the program and the user. GUI variables provide a way of communication between the program and the user. A regular variable allows a program to perform internal computation without the user awareness. Todos los controles GUI son variables. La principal diferencia entre una variable regular y una variable GUI es que una variable regular no puede ser vista por el usuario, mientras que una variable GUI puede ser vista por el programa y por el usuario. Las variables GUI proporcionan una forma de comunicación entre el programa y el usuario. Una variable regular permite a un programa realizar cálculos internos sin que el usuario se de cuenta. |
The Button |
| The button is the most basic GUI control. A button indicates that the program provides some functionability. When the user presses the button; the user orders the computer to perform a specific task. The button has a Text that is displayed over it, so that the user knows in advance the action that the computer will perform. Because the button is a variable, it also has a name. In the figure below, there are two buttons; when the user presses the Print button, the program executes some computer commands to send the note to the printer. Behind each button there is a list of computer commands that will be executed when the user presses the button. El botón es el control GUI más básico. Un botón indica que el programa proporciona algún tipo de funcionabilidad. Cuando el usuario presiona el botón, el usuario ordena a la computadora realizar una tarea específica. El botón tiene un texto que se muestra sobre él, de tal forma que el usuario conozca con anterioridad la acción que la computadora realizará. Debido a que el botón es una variable, este también tiene un nombre. En la figura de bajo, hay dos botones, cuando el usuario presiona el botón de Print, el programa ejecuta algunos comandos de computadora para enviar la nota a la impresora. Atrás de cada botón hay una lista de comandos de computadora que se ejecutarán cuando el usuario presione el botón. |
| Tip |
| Most GUI controls can be created using the mouse. In most cases, you select the control (from a toolbox) that you would like to create and draw the control using the mouse. Once the control is on the screen, you must assign a proper name as described previously. Never use generic names such as button1. La mayoría de los controles GUI pueden ser creados con el mouse. En la mayoría de los casos, se selecciona el control (desde una barra de controles) y se dibuja el control usando el ratón. Una vez que el control está en la pantalla, usted debe asignarle un nombre adecuado como se describió previamente. Nunca use nombres genéricos tal como boton1. |
| Tip |
| The figure below shows a simple GUI with button called btConvert. The name btConvert will be used to access the button from the program. The button has the text Convert>>, this text provides information to the user so that he can know what the button does. As it can be seen from the figure, the button can be seen by humans and by the computer. In contrast, the variable gallons of type double cannot be seen by the user. When the user presses the button, the computer executes a list of instructions. La figura de abajo muestra una interface GUI sencilla con un botón llamado btConvert. El nombre btConvert se usará para accesar al botón desde el programa. El botón tiene el texto Convert>>, este texto proporciona información al usuario de tal forma que el pueda saber que hace el botón. Como se puede ver de la figura, el botón puede ser visto por los humanos y por la computadora. En contraste, la variables gallons del tipo double no puede ser vista por el usuario. Cuando el usuario presiona el botón, la computadora ejecuta una lista de instrucciones. |
The Text Box |
| Another typical GUI control is the text box. Usually, textboxes are represented by a white rectangle. When the user clicks on them, the cursor (the caret) displays and the user can type some text with the keyboard. As the user can see the text inside a textbox, a textbox can also be used to display information in the screen. Textboxes provide a two way text communication between the program and the user as shown in the figure. Additionally, the textbox allows moving information to and from other programs using the clipboard. Otro control GUI típico es la caja de texto. Usualmente, las cajas de texto son representadas por un rectángulo blanco. Cuando el usuario hace clic en ellas, el cursor (el caret) aparece y el usuario puede escribir texto con el teclado. Como el usuario puede ver el texto dentro de una caja de texto, una caja de texto también puede ser usada para mostrar información en la pantalla. Las cajas de texto proporcionan una comunicación por medio de texto en ambas direcciones entre el programa y el usuario como se muestra en la figura. Adicionalmente, la caja te texto permite mover información hacia y desde otros programas usando el porta papeles. |
| Tip |
| Because numbers, dates, colors can be displayed as text, textboxes can be used to input and output any kind of information. However, it is always recommended to use a control specifically designed for the data type instead of using a textbox. Debido a que los números, las fechas y los colores pueden ser representado como texto, las cajas de texto se pueden usar para entrada y salida de cualquier tipo de información. Sin embargo, se recomienda siempre usar un control específicamente diseñado para el tipo de datos en lugar de usar una caja de texto. |
| Tip |
| In the figure, there are two text boxes: tbxGallons and tbxLiters; tbxGallons is used for input while tbxLiters is used for output. The small code of three lines is executed when the user presses the button. The code starts by extracting the numeric value provided by the user in the textbox tbxGallons; the double value is stored in the variable named gallons. In the second line, the number of liters is computed by multiplying the number of gallons by 3.7854. In the last line, the computed value is shown in the textbox tbxLiters. En la figura, hay dos cajas de texto: tbxGallons y tbxLiters; la caja tbxGallons es usada para entrada mientras que la caja tbxLiters es usada para salida. El pequeño código de tres líneas es ejecutado cuando el usuario presiona el botón. El código comienza extrayendo el valor numérico proporcionado por el usuario en la caja de texto tbxGallons; el valor de punto flotante es almacenado en la variable con nombre gallons. En la segunda línea, se calcular el número de litros al multiplicar el número de galones por 3.7854. En la última línea, el valor calculado es mostrado en la caja de texto tbxLiters. |
| Problem 1 |
| Write a mark in the correct column indicating if a textbox or button should be used in the program. Follow the example. Marque en la columna correcta indicando si una caja de texto o un botón debe ser usando en el programa. |
| Program | textbox | button |
| Show the name of a city (mostrar el nombre de una ciudad) | X | |
| Input the name of a street (proporcionar el nombre de una calle) | ||
| Compute the total of a sale (calcular el total de una venta) | ||
| Show the number of items (mostrar el número de artículos) | ||
| Print a graph (imprimir una gráfica) | ||
| Solve an equation (resolver una ecuación) | ||
| Provide a numerical value (proporcionar un valor numérico) | ||
| Compute the tax (calcular el impuesto) | ||
| Input the distance between two cities (proporcionar la distancia entre dos ciudades) | ||
| Save a document (guardar un documento) | ||
| Delete a file (borrar un archivo) |
| Tip |
| In Java, a textbox is called JTextField, a label is called JLabel, and a button is called JButton. En Java, una caja de texto se llama JTextField, una etiqueta se llama JLabel, y un botón se llama JButton. |